<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="bgys">
    <!-- 
      头部标题
     -->
    <head-main />
    <!-- 任务栏 -->
    <div class="taskbox">
      <!-- 一级菜单 -->
      <!--  v-if="taskstep == erstep" -->
      <!-- 随带关闭按钮 -->
      <div class="tool taskclosebox" @click="closefn" v-if="!erstepshow">
        <img src="@/images/taskclose.png" alt="" class="normal" />
        <img src="@/images/taskcloseac.png" alt="" class="active" />
      </div>
      <div
        class="tool taskboxitem"
        v-for="item in taskdata"
        :key="item.id"
        @click="taskfn(item.id)"
        v-show="item.id == erstep || erstepshow"
      >
        <img
          src="@/images/taska.png"
          alt=""
          class="normal bgm"
          v-if="taskstep != item.id"
        />
        <img
          src="@/images/taskac.png"
          alt=""
          class="active bgm"
          v-if="taskstep != item.id"
        />
        <img
          src="@/images/taskac.png"
          alt=""
          v-if="taskstep == item.id"
          class="bgm"
        />
        <!-- 序号 -->
        <span class="taskitemid">{{ item.id }}</span>
        <!-- 名字 -->
        <span class="taskitemname">{{ item.name }}</span>
      </div>
      <!-- 二级菜单 -->
      <div class="erbox" v-if="!erstepshow">
        <div
          :class="eritem == items.id ? 'erboxitem erboxitemac ' : 'erboxitem'"
          v-for="items in taskdata[erstep - 1].erdata"
          :key="items.id"
          @click="eritem = items.id"
        >
          <span>{{ items.name }}</span>
        </div>
      </div>
      <!--  -->
      <!-- 三级菜单 变态反人类设计 -->
      <!-- v-for="item in taskdata[erstep - 1].erdata[]" -->
      <div class="sjbox" v-if="taskdata[erstep - 1]">
        <div
          class="sjitem"
          v-for="itemsd in taskdata[erstep - 1].erdata[eritem - 1].sandata"
          :key="itemsd.id"
        >
          <span>{{ itemsd.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headMain from '@/components/headMain.vue'
export default {
  components: { headMain },
  name: 'WorkspaceJsonIndex',

  data() {
    return {
      taskstep: 1,
      taskdata: [
        {
          id: 1,
          name: '准备',
          erdata: [
            {
              id: 1,
              name: '穿工作服'
            },
            {
              id: 2,
              name: '洗手'
            },
            {
              id: 3,
              name: '戴口罩'
            },
            {
              id: 4,
              name: '戴手套'
            }
          ]
        },
        {
          id: 2,
          name: '静脉采血',
          erdata: [
            {
              id: 1,
              name: '采血前准备'
            },
            {
              id: 2,
              name: '核对患者信息'
            },
            {
              id: 3,
              name: '绑扎压脉带'
            },
            {
              id: 4,
              name: '采血点消毒'
            },
            {
              id: 5,
              name: '采血'
            },
            {
              id: 6,
              name: '拔针按压'
            },
            {
              id: 7,
              name: '标本处理'
            }
          ]
        },
        {
          id: 3,
          name: '样品离心',
          erdata: [
            {
              id: 1,
              name: '开机'
            },
            {
              id: 2,
              name: '放入样品'
            },
            {
              id: 3,
              name: '放入平衡试管'
            },
            {
              id: 4,
              name: '设置参数'
            },
            {
              id: 5,
              name: '开始样品离心'
            },
            {
              id: 6,
              name: '取出样品'
            },
            {
              id: 7,
              name: '检查样品'
            }
          ]
        },
        {
          id: 4,
          name: '样品开盖',
          erdata: [
            {
              id: 1,
              name: '放入样品'
            },
            {
              id: 2,
              name: '开盖'
            }
          ]
        },
        {
          id: 5,
          name: '生化分析',
          erdata: [
            {
              id: 1,
              name: '检查仪器'
            },
            {
              id: 2,
              name: '仪器开机'
            },
            {
              id: 3,
              name: '登录工作站'
            },
            {
              id: 4,
              name: '开机保养'
            },
            {
              id: 5,
              name: '检查试剂'
            },
            {
              id: 6,
              name: '更换试剂'
            },
            {
              id: 7,
              name: '检查清洗液'
            },
            {
              id: 8,
              name: '校准定标',
              sandata: [
                {
                  id: 1,
                  name: '准备校准品'
                },
                {
                  id: 2,
                  name: '下载该批号校准品'
                },
                {
                  id: 3,
                  name: '分配指定定标液'
                },
                {
                  id: 4,
                  name: '选定校准项目'
                },
                {
                  id: 5,
                  name: '放入校准品'
                },
                {
                  id: 6,
                  name: '开始校准'
                },
                {
                  id: 7,
                  name: '校准完成'
                },
                {
                  id: 8,
                  name: '查看定标结果'
                }
              ]
            },
            {
              id: 9,
              name: '质控',
              sandata: [
                {
                  id: 1,
                  name: '准备质控品'
                },
                {
                  id: 2,
                  name: '下载该批号质控品'
                },
                {
                  id: 3,
                  name: '分配指定质控品'
                },
                {
                  id: 4,
                  name: '勾选常规质控项目'
                },
                {
                  id: 5,
                  name: '放入质控品'
                },
                {
                  id: 6,
                  name: '开始质控'
                },
                {
                  id: 7,
                  name: '质控完成'
                },
                {
                  id: 8,
                  name: '查看质控结果'
                }
              ]
            }
          ]
        }
      ],
      erstep: 1,
      erstepshow: false,
      eritem: 1
    }
  },

  mounted() {},

  methods: {
    taskfn(i) {
      // console.log('触发l')
      this.taskstep = i
      this.erstep = i
      this.eritem = 1
      this.erstepshow = false
    },
    closefn() {
      this.erstep = 0
      this.erstepshow = true
      // console.log('现在二级', this.erstep)
    }
  }
}
</script>

<style>
.bgys {
  background-color: #02284b;
  width: 100%;
  height: 100%;
}
</style>
